<template>
  <view>
    <!-- 背景 -->
    <view class="login-ball small"></view>

    <view class="logo-cell">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
    </view>
    <view class="title">o2o运动健康商家端</view>
    <div class="form">
      <u-form :model="form" ref="validateform">
        <u-form-item class="cell" label-width="120" label="用户名" prop="username">
          <u-input v-model="form.username" placeholder="请输入用户名" />
        </u-form-item>
        <u-form-item class="cell" label-width="120" label="密码" prop="password">
          <u-input :clearable="false" v-model="form.password" :adjust-position="false" type="password" placeholder="请输入密码" />
        </u-form-item>
        <view class="submit" @click="submit">登录</view>
      </u-form>
      <myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification" business="LOGIN" />
    </div>

  </view>
</template>
<script>
import storage from "@/utils/storage.js"; //缓存
import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
import { storeLogin, getUserInfo } from "@/api/login";
import myVerification from "@/components/verification/verification.vue"; //验证码模块
export default {
  data() {
    return {
      codeFlag: false, //验证码登录
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  onReady() {
    this.$refs.validateform.setRules(this.rules);
  },
  components: {
    myVerification,
  },

  onLoad(options) {},
  methods: {
    // 获取验证码
    getCode() {
      this.codeFlag = true;
      uni.showLoading({
        title: "加载中",
      });
      setTimeout(() => {
        this.$refs.verification.hide();
        uni.hideLoading();
      }, 500);
    },
    // 验证码验证
    async verification(val) {
      let flage = val == this.$store.state.verificationKey ? true : false;

      // 如果此验证通过则调取登录
      if (flage) {
        let res = await storeLogin({
          username: this.form.username,
          password: this.form.password,
        });
        // 登录成功
        if (res.data.success) {
          // 存到缓存
          storage.setAccessToken(res.data.result.accessToken);
          storage.setRefreshToken(res.data.result.refreshToken);

          // 获取商家信息
          getUserInfo().then((user) => {
            if (user.data.success) {
              /**
               * 个人信息存储到缓存userInfo中
               */
              storage.setUserInfo(user.data.result);

              // 登录成功
              uni.showToast({
                title: "登录成功!",
                icon: "none",
              });

              /**
               * 计算出当前router路径
               * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
               * 2.都不满足返回跳转页面
               */
              whetherNavigate();
            } else {
              uni.switchTab({
                url: "/pages/tabbar/home/index",
              });
            }
          });
        }
        this.codeFlag = false;
      }
    },
    // 提交验证表单
    submit() {
      this.$refs.validateform.validate((valid) => {
        if (valid) {
			console.log(this.codeFlag);
          if (!this.codeFlag) {
            this.getCode();
          }
          /**
           * 清空当前账号信息
           */
          storage.setAccessToken("");
          storage.setRefreshToken("");
          storage.setUuid(this.uuid.v1());
          storage.setUserInfo({});
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
@import url("./login.scss");
.img{
	width: 98rpx;
	height: 98rpx;
}
</style>
